import {
  Button,
  StyleSheet,
  Text,
  View,
  Vibration,
  ToastAndroid,
  TextInput,
  Keyboard,
  Dimensions,
} from 'react-native';
import React, {useEffect} from 'react';

const Vibration震动交互8_18 = () => {
  const onPress = () => {
    /* ------Vibration震动交互 */
    // https://www.reactnative.cn/docs/vibration
    // Vibration.vibrate();
    // Vibration.vibrate(1000); //just android
    // Vibration.cancel();
    /* 在 Android 上，数组的奇数指数表示振动持续时间，而偶数表示分离时间。在 iOS 上，数组中的数字表示分离时间，因为振动持续时间是固定的。patternpattern */
    // Vibration.vibrate([100, 200, 300, 400, 500, 600]); // 先停100ms 然后再震动200ms以此类推
    // Vibration.vibrate([100, 200, 300, 400], true); // 这个需要cancel才能停下

    /* ------ToastAndroid安卓平台的提示（被阉割了的,现在力推snackBar） */
    // ToastAndroid.show('这是一个提示', ToastAndroid.SHORT);
    // ToastAndroid.show('这是一个提示', ToastAndroid.LONG);
    /* ==== sdk30 之后可能位置是不起作用的 */
    // ToastAndroid.showWithGravity(
    //   '这是一个提示',
    //   ToastAndroid.LONG,
    //   ToastAndroid.TOP,
    // );

    ToastAndroid.showWithGravityAndOffset(
      '这是一个提示',
      ToastAndroid.LONG,
      ToastAndroid.TOP,
      300,
      99,
    );



    /* ----keyboard */
    // Keyboard.dismiss();
  };

  /* ----- Keyboard键盘操作api */
  useEffect(() => {
    //这段代码是在监听设备屏幕尺寸的变化。当设备的窗口或屏幕尺寸发生变化时，它会触发一个事件，并打印出新的窗口和屏幕尺寸。这在响应式设计中非常有用，可以帮助开发者根据屏幕尺寸的变化调整布局或样式。
    const subcription = Dimensions.addEventListener(
      'change',
      (window, screen) => {
        console.log('=================change===================');
        console.log(window);
        console.log(screen);
        console.log('====================================');
      },
    );

    const showSubscription = Keyboard.addListener(
      'keyboardDidShow',
      onKeyboardShow,
    );
    const hideSubscription = Keyboard.addListener(
      'keyboardDidHide',
      onKeyboardHide,
    );

    return () => {
      subcription.remove();
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);
  const onKeyboardShow = () => {
    console.log('================keyboardDidShow====================');
    console.log('keyboardDidShow');
    console.log('====================================');
  };

  const onKeyboardHide = () => {
    console.log('==================onKeyboardHide==================');
    console.log('onKeyboardHide');
    console.log('====================================');
  };
  return (
    <View style={styles.root}>
      <Text style={{color: 'red', fontSize: 14, textAlign: 'center'}}>
        8_10Vibration震动交互_ToastAndroid
      </Text>

      <View style={styles.container}>
        <Button title="8_10按钮" onPress={onPress} />
      </View>
      {/* transform */}
      <View
        style={[
          {
            width: 100,
            height: 100,
            backgroundColor: '#3050ff',
            marginTop: 60,
            marginLeft: 60,
          },
          {
            transform: [
              /* 有顺序的 */
              {translateX: 200},
              {translateY: 0},
              // {scale: 1.5},
              // {scaleX: 1.5},
              // {scaleY: 1.5}
              // {rotateX: '45deg'},
              // {rotateY: '45deg'},
              // {rotateZ: '45deg'},
              // {rotate: '45deg'},
            ],
          },
        ]}></View>

      <TextInput
        style={{
          width: 'auto',
          marginHorizontal: '20%',
          height: 56,
          backgroundColor: '#E0E0E0',
        }}
      />
    </View>
  );
};

export default Vibration震动交互8_18;

const styles = StyleSheet.create({
  root: {
    width: 'auto',
    height: 500,
    borderWidth: 1,
    borderColor: 'red',
    marginHorizontal: '2%',
    marginBottom: 20,
  },
  container: {
    borderColor: 'pink',
    borderWidth: 1,
    paddingHorizontal: 10,
    paddingBottom: 10,
  },
});
